<template>
  <scroll-view scroll-y="false">
  <view class="container">
    <!-- Logo -->
    <image src="/static/logo.png" class="logo"></image>
    <text class="title">Rosense-ai</text>
    <text class="subtitle">轻松工作，多点生活</text>

    <!-- 输入框 -->
    <view class="input-group">
      <input v-model="username" placeholder="请输入用户名" class="input" />
      <input v-model="password" type="password" placeholder="请输入密码" class="input" />
    </view>

    <!-- 登录按钮 -->
    <button @click="login" class="login-button" size="small">登录</button>

    <!-- 底部协议 -->
    <view class="bottom-text">
      <view @click="toggleAgree" class="checkbox-wrapper">
        <view :class="['custom-checkbox', { checked: agree }]">
          <text v-if="agree" class="checkmark">√</text>
        </view>
      </view>
      <text>已阅读并同意 </text>
      <text @click="goto('/pages/service-agreement/service-agreement')" class="link">服务协议</text>
      <text> 和 </text>
      <text @click="goto('/pages/privacy-policy/privacy-policy')" class="link">隐私政策</text>
      <text>，</text>
      <text>各账户资产与权限不互通</text>
    </view>
  </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const username = ref('')

const password = ref('')
const agree = ref(false)
const showDrawer = ref(false)

// 切换协议勾选状态
const toggleAgree = () => {
  agree.value = !agree.value
}

// 切换抽屉显示状态
const toggleDrawer = () => {
  showDrawer.value = !showDrawer.value
}

const login = () => {
  if (!agree.value) {
    uni.showToast({ title: '请先阅读并同意服务协议和隐私政策', icon: 'none' })
    return
  }
  if (username.value.length === 0 || password.value.length === 0) {
    uni.showToast({ title: '请输入账号密码', icon: 'none' })
    return
  }

  // 发送登录请求
  uni.request({
    url: 'http://192.168.0.20:3003/agentapi/login',
    method: 'POST',
    data: {
      username: username.value,
      password: password.value
    },
    success: (res) => {
      const responseData = res.data
      if (responseData.code==200) {
        uni.setStorageSync('token', responseData.token)
        uni.showToast({ title: '登录成功', icon: 'success' })

        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/index/index'
          })
        }, 1000)
      } else {
        uni.showToast({ title: '登录失败', icon: 'none' })
      }
    },
    fail: () => {
      uni.showToast({ title: '网络异常', icon: 'none' })
    }
  })
}

// 页面跳转方法
const goto = (url: string) => {
  uni.navigateTo({ url })
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  background-color: #f5f5f5;
  height: 95vh;
  overflow: hidden;
}

.logo {
  width: 120rpx;
  height: 120rpx;
  margin-top: 200rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-top: 40rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}

.input-group {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin-top: 100rpx;
}

.input {
  border: 1rpx solid #ccc;
  padding: 20rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.login-button {
  background-color: #007aff;
  color: white;
  border-radius: 8rpx;
  padding: 20rpx 0;
  width: 80%;
  margin-top: 40rpx;
}

.bottom-text {
  display: flex;
  align-items: center;
  margin-top: 100rpx;
  margin-left: 100rpx;
  margin-right: 100rpx;
  font-size: 24rpx;
  color: #666;
  flex-wrap: wrap;
}

.link {
  color: #007aff;
  text-decoration: underline;
  margin-right: 5rpx;
  cursor: pointer;
}

.checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  margin-right: 10rpx;
  cursor: pointer;
}

.custom-checkbox {
  width: 24rpx;
  height: 24rpx;
  border: 2rpx solid #999;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: background-color 0.3s, border-color 0.3s;
}

.custom-checkbox.checked {
  background-color: #007aff;
  border-color: #007aff;
}

.checkmark {
  color: #fff;
  font-size: 18rpx;
}

</style>



